<template>
  <div class="limited-row" v-if="item">
    <!-- 左侧内容 -->
    <div class="left-content">
      <div class="header-container input-title-container">
        <el-input v-model="item.title" placeholder="请输入任务标题" class="input-title"></el-input>
        <el-button type="primary" @click="saveWork" class="button-title">保存</el-button>
      </div>
      <!-- 任务描述信息 -->
      <el-descriptions
        labelClassName="descriptions-label-class"
        content-class-name="descriptions-content-class"
        :column="4"
        border
        direction="vertical">
        <el-descriptions-item label="负责人">
          <project-member class="input-class" v-model="item.assignee" :project-id="item.projectId"></project-member>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-select class="input-class" v-model="item.status" placeholder="请选择工作项状态">
            <el-option
              v-for="dict in dict.type.work_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="优先级">
          <el-select class="input-class" v-model="item.priority" placeholder="请选择优先级">
            <el-option
              v-for="dict in dict.type.priority"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="类型">
          <el-select v-model="item.type" placeholder="请选择工作项类型">
            <el-option
              v-for="dict in dict.type.work_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="开始时间">
          <el-date-picker
            class="input-class"
            v-model="item.startDate"
            type="date"
            placeholder="选择开始时间">
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item label="截至时间">
          <el-date-picker
            class="input-class"
            v-model="item.dueDate"
            type="date"
            placeholder="选择截至时间">
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ item.createdAt }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ item.updatedAt }}</el-descriptions-item>
      </el-descriptions>

      <!-- 菜单 -->
      <div class="menu">
        <el-menu
          default-active="1"
          active-text-color="#409EFF"
          background-color="#fff"
          mode="horizontal"
          text-color="#666"
          @select="(key) => (activeIndex = key)"
        >
          <el-menu-item index="1">描述</el-menu-item>
          <el-menu-item index="2">子工作项</el-menu-item>
          <el-menu-item index="3">测试</el-menu-item>
          <el-menu-item index="4">缺陷</el-menu-item>
          <el-menu-item index="5">工作项附件</el-menu-item>
        </el-menu>
        <el-button v-if="activeIndex === '5'" @click="showUpFile = true">上传附件</el-button>
      </div>

      <!-- 动态内容展示 -->
      <div class="content-box">
        <div v-show="activeIndex === '1'">
          <div class="content-text">
            <editor :height="348" v-model="item.description"></editor>
          </div>
        </div>
        <div v-show="activeIndex === '2'">
          <el-table :data="childItem">
            <el-table-column label="编号" prop=""></el-table-column>
            <el-table-column label="标题" prop="title"></el-table-column>
            <el-table-column label="状态" prop="status"></el-table-column>
            <el-table-column label="完成任务数" prop="childCompletedCount"></el-table-column>
            <el-table-column label="子任务数" prop="childCount"></el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '3'">
          <el-table :data="tests">
            <el-table-column label="标题" align="center" prop="title"/>
            <el-table-column label="结果" align="center" prop="outcome">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.test_outcome" :value="scope.row.outcome"/>
              </template>
            </el-table-column>
            <el-table-column label="优先级" align="center" prop="priority">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.test_priority" :value="scope.row.priority"/>
              </template>
            </el-table-column>
            <el-table-column label="测试状态" align="center" prop="status">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.test_status" :value="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column label="执行人ID" align="center" prop="executorId">
              <template slot-scope="scope">
                <user-and-avatar :user-id="scope.row.executorId"></user-and-avatar>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createdAt">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人ID" align="center" prop="createdBy">
              <template slot-scope="scope">
                <user-and-avatar :user-id="scope.row.createdBy"></user-and-avatar>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '4'">
          <el-table :data="flaws">
            <el-table-column label="标题" align="center" prop="title"/>
            <el-table-column label="负责人" align="center" prop="responsibleId">
              <template slot-scope="scope">
                <user-and-avatar :user-id="scope.row.responsibleId"></user-and-avatar>
              </template>
            </el-table-column>
            <el-table-column label="严重程度" align="center" prop="severity">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.order_of_severity" :value="scope.row.severity"/>
              </template>
            </el-table-column>
            <el-table-column label="缺陷类型" align="center" prop="defectClass">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.defect_class" :value="scope.row.defectClass"/>
              </template>
            </el-table-column>
            <el-table-column label="重现概率" align="center" prop="recurrenceProbability">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.recurrence_probability" :value="scope.row.recurrenceProbability"/>
              </template>
            </el-table-column>
            <el-table-column label="原因分析" align="center" prop="causeAnalysis">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.cause_analysis" :value="scope.row.causeAnalysis"/>
              </template>
            </el-table-column>
            <el-table-column label="解决方案" align="center" prop="solution">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.solution" :value="scope.row.solution"/>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createdAt">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人" align="center" prop="createdBy">
              <template slot-scope="scope">
                <user-and-avatar :user-id="scope.row.responsibleId"></user-and-avatar>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-show="activeIndex === '5'">
          <el-table :data="fileList" @row-click="(row)=>{showFile=true;file=row}">
            <el-table-column label="标题" align="center" prop="title"/>
            <el-table-column label="附件审核状态" align="center" prop="reviewStatus"/>
            <!--            <el-table-column label="审核人ID" align="center" prop="reviewedBy">-->
            <!--              <template v-slot:default="scope">-->
            <!--                <span><user-and-avatar :userId="scope.row.reviewedBy"></user-and-avatar></span>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人ID" align="center" prop="createdBy">
              <template v-slot:default="scope">
                <span><user-and-avatar :userId="scope.row.createdBy"></user-and-avatar></span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  icon="el-icon-delete"
                  @click.native.stop="delFile(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="right-content">
      <el-collapse v-model="activeNames">
        <el-collapse-item
          name="1" title="属性">
          <el-descriptions
            labelClassName="descriptions-label-class"
            content-class-name="descriptions-content-class"
            :column="1"
            border>
            <el-descriptions-item label="风险">
              <el-select class="input-class" v-model="item.risk" placeholder="请选择风险等级">
                <el-option
                  v-for="dict in dict.type.work_risk"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="业务价值">
              <el-input class="input-class" v-model="item.businessValue" placeholder="请输入商业价值"></el-input>
            </el-descriptions-item>
            <el-descriptions-item label="故事点数">
              <el-input-number :min="0" controls-position="right" class="input-class" v-model="item.storyPoints"
                               placeholder="请输入故事点数"></el-input-number>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="2" title="变更">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="版本号">
              <el-input class="input-class" v-model="item.version" placeholder="请输入版本号"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="3" title="发布">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="所属迭代">
              <el-select clearable class="input-class" v-model="item.sprintId" placeholder="请选择迭代">
                <el-option
                  v-for="item in sprints"
                  :key="item.sprintId"
                  :label="item.name"
                  :value="item.sprintId">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right"><dict-tag :options="dict.type.sprint_status" :value="item.status"/></span>
                </el-option>
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="迭代状态">
              <dict-tag :options="dict.type.sprint_status"
                        :value="(sprints.find(e=>e.sprintId===item.sprintId)||{}).status"/>
            </el-descriptions-item>
            <el-descriptions-item label="所属发布">
              {{ getRelease.title }}
            </el-descriptions-item>
            <el-descriptions-item label="发布阶段">
              <dict-tag :options="dict.type.release_status"
                        :value="getRelease.status"/>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="4" title="开发">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="子任务总数">{{ item.childCount }}</el-descriptions-item>
            <el-descriptions-item label="已完成子任务数">{{ item.childCompletedCount }}</el-descriptions-item>
            <el-descriptions-item label="进度">
              <el-progress :percentage="item.childCompletedCount/item.childCount*100||0"></el-progress>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="5" title="工时">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="预估工时">
              <el-input-number placeholder="请输入工作量估算" v-model="item.estimatedWorkingHours"
                               controls-position="right" :min="0"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="登记工时">
              <el-input-number placeholder="请输入剩余工作量" v-model="item.registerWorkingHours"
                               controls-position="right" :min="0" :max="item.estimatedWorkingHours"></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="剩余工时">
              {{ Math.max(item.estimatedWorkingHours - item.registerWorkingHours, 0) }}
            </el-descriptions-item>
            <el-descriptions-item label="工时进度">
              <el-progress
                :percentage="(Math.min(item.registerWorkingHours/item.estimatedWorkingHours,1)*100).toFixed(0)*1.0||0"></el-progress>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item name="6" title="基础信息">
          <el-descriptions labelClassName="descriptions-label-class"
                           content-class-name="descriptions-content-class" :column="1" border>
            <el-descriptions-item label="更新人">
              <user-and-avatar :user-id="item.updatedBy"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ item.updatedAt }}</el-descriptions-item>
            <el-descriptions-item label="创建人">
              <user-and-avatar :user-id="item.createdBy"></user-and-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ item.createdAt }}</el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-dialog title="上传文件" :visible.sync="showUpFile" width="900px" append-to-body>
      <el-form ref="form" :model="file" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="file.title" placeholder="请输入标题"/>
        </el-form-item>
        <el-form-item label="文件" prop="fileUrl">
          <file-upload :file-type="[]" v-model="file.fileUrl"/>
        </el-form-item>
        <!--        <el-form-item label="审核人ID" prop="reviewedBy">-->
        <!--          <el-input v-model="file.reviewedBy" placeholder="请输入审核人ID"/>-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="upFile">确 定</el-button>
        <el-button @click="showUpFile=false;file={}">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="showFile"
      title="附件详情"
      width="1400px"
      append-to-body>
      <div>
        <h3>{{ file.title }}</h3>
      </div>
      <FileShow :url="file.fileUrl"></FileShow>
    </el-dialog>
  </div>
</template>
<script>
import {getWorkAllInit, getWorkById, listAllWork, updateWork} from "@/api/projectUser/userWork";
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";
import {addWorkAttachment, delWorkAttachment, listAllWorkAttachment} from "@/api/projectUser/userWorkAttachment";
import {listAllProjectUserAssignment} from "@/api/projectUser/userProjectUserAssignment";
import {listAllSprint} from "@/api/projectUser/userSprint";
import {listAllRelease} from "@/api/projectUser/userRelease";
import FileShow from "@/components/FileShow/index.vue";
import ProjectMember from "@/components/ProjectMember/index.vue";

export default {
  name: "UpWork",
  components: {ProjectMember, FileShow, UserAndAvatar},
  dicts: [
    'work_status',      // 工作状态
    'priority',         // 优先级
    'work_type',        // 工作类型
    'test_outcome',     // 测试结果
    'test_priority',    // 测试优先级
    'test_status',      // 测试状态
    'order_of_severity', // 严重程度
    'defect_class',     // 缺陷类型
    'recurrence_probability', // 重现概率
    'cause_analysis',   // 原因分析
    'solution',        // 解决方案
    'work_risk',        // 工作风险
    'sprint_status',    // 迭代状态
    'release_status'    // 发布状态
  ],
  data() {
    return {
      flaws: [],
      tests: [],
      showFile: false,
      file: {},
      showUpFile: false,
      releases: [],
      sprints: [],
      users: [],
      labelStyle: {width: '200px'},
      contentStyle: {
        color: '#555',
        fontSize: '14px',
        // textAlign: 'center',
        // verticalAlign: 'middle',
        height: '45px',
        padding: '0 10px'
      },
      activeIndex: '1',
      activeNames: ['1', '2', '3', '4', '5', '6'], // 默认展开所有折叠项
      item: {},
      childItem: [],
      dependOn: [
        {id: 'A01', title: '依赖任务1', status: '已完成', owner: '王五', relation: '前置'},
        {id: 'A02', title: '依赖任务2', status: '待完成', owner: '赵六', relation: '后置'},
      ],
      fileList: [],
    };
  },
  props:
    {
      workId: {
        type: Number,
      }
      ,
    }
  ,
  watch: {
    workId: {
      handler(newVal, oldVal) {
        if (newVal === null || newVal === undefined) {
          return
        }
        this.workId = newVal;
        this.getData()
      }
      ,
      immediate: true
    }
  }
  ,
  created() {
  }
  ,
  computed: {
    getRelease() {
      return (this.releases.find(e => e.releaseId === this.item.releaseId) || {})
    }
  }
  ,
  methods: {
    upFile() {
      addWorkAttachment(this.item.workItemId, this.file).then(response => {
        this.$modal.msgSuccess("添加成功");
        this.$emit('closeDialog');
        this.getData();
        this.showUpFile = false;
      })
    }
    ,
    getData() {
      getWorkAllInit(this.workId).then(({data}) => {
        this.item = data.work;
        this.fileList = data.workAttachments;
        this.childItem = data.childWorks;
        this.tests = data.tests;
        this.flaws = data.flaws;
        listAllSprint(this.item.projectId).then(({data}) => {
          this.sprints = data
        });
        listAllRelease(this.item.projectId).then(({data}) => {
          this.releases = data
        })
        listAllProjectUserAssignment(this.item.projectId).then(({data}) => {
          this.users = data
        })
      })
    }
    ,
    delFile(row) {
      delWorkAttachment(this.item.projectId, this.item.workItemId, row.attachmentId).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.$emit('closeDialog');
        this.getData()
      })
    }
    ,
    saveWork() {
      updateWork(this.item).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.$emit('closeDialog');
        this.$emit('upData')
        this.getData()
      });
    }
    ,
  }
}
</script>
<style lang="scss" scoped>
.avatar-wrapper {
  display: inline-block;
  border-radius: 12px; /* 圆角 */
  transition: all 0.3s ease;
}

.avatar-wrapper:hover {
  border: 2px solid #007bff; /* 鼠标悬停时显示边框 */
  padding: 2px;
  border-radius: 12px;
  cursor: pointer;
}


/* 页面标题 */
.page-title {
  font-size: 24px;
  color: #333;
  font-weight: bold;
  margin: 0 0 10px 0;
  animation: fadeInText 0.5s ease-out;
}

/* 菜单 */
.el-menu-demo {
  margin: 16px 0 2px 0;
  border-bottom: 1px solid #e6e6e6;
  background-color: #fff;

  .el-menu-item {
    transition: all 0.3s ease;

    &:hover {
      background-color: #e6f7ff;
      color: #409eff;
    }
  }
}

/* 主要内容 */
.content-box {
  overflow-y: auto; /* 内容超出时显示滚动条 */
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}


/* 处理中心 */
.processing-center {
  font-size: 16px;
  text-align: center;
  color: #999;
}

/* 折叠面板 */
.el-collapse-item__header {
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: #f0faff;
  }
}

/* 动画 */
@keyframes fadeInPage {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}


</style>
